<template>
<div class="flex-1 h-[300px] ">
    <!-- <PageCard class="margin0"> -->
        <div class="enterList">
            <template>
            <el-button class="ed-button ed_black-bottom ed-button36" @click="synchronizate"><svg-icon icon-class="synchronizate"/>同步设备</el-button>
        </template>
        </div>
        
    <!-- </PageCard> -->
    <ApiTable :api="api.videoDeviceList" ref="table" :params="videoParams">
        <el-table-column type="index" width="80" label="序号"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="deviceId" label="设备序列号" ></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="devicePlace" label="设备地点"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="deviceType" label="设备类型" :formatter="setDeviceType" ></el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="操作">
            <template slot-scope="scope">
                <el-button class="ed-table-bottom ed_blue_border" v-has="'basic:project:update'" @click="editConfig(scope.row)">配置</el-button>
            </template>
        </el-table-column>
    </ApiTable>
    <EdDialog ref="videDdialogRef" v-if="data.showVideoConfigure" title="安防视频配置" @close-dialog="closeDialog" @save-dialog="saveDialog">
            <el-form :model="videoDeviceForm"  ref="videoDeviceFormRef" label-position='right' label-width="auto">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="设备名称" prop="name" :rules="validate.validates({required:true,msg:'请输入设备名称'})" >
                            <el-input v-model="videoDeviceForm.name" maxlength="20" disabled placeholder="请输入"></el-input>
                            <!-- <EdSelect v-model="videoDeviceForm.name"  disabled ref="selectpatrol" :selectParams="deviceNameParams"  style="width:100%"></EdSelect> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="设备地点" prop="devicePlace" :rules="validate.validates({required:true,msg:'请输入设备地点'})" >
                            <el-input v-model="videoDeviceForm.devicePlace" maxlength="20" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="设备类型" prop="deviceType" >
                            <EdSelect v-model="videoDeviceForm.deviceType" :selectParams="data.deviceTypeParams" style="width:100%" :formatter="setDeviceType"></EdSelect>
                            <!-- <el-input v-model="videoDeviceForm.deviceType"  placeholder="请输入"></el-input> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="经纬度" >
                            <el-input style="width:40%" placeholder="请输入" maxlength="20" v-model="videoDeviceForm.longitude"></el-input>&nbsp;&nbsp;<el-input style="width:40%" v-model="videoDeviceForm.latitude" maxlength="20" placeholder="请输入"></el-input>
                            <span class="colorMainTwo marginLeft8" @click="showMap">
                                <i ><svg-icon icon-class="map-svg" style="width: 24px;height: 24px;"/></i>
                                <!-- <span class="marginLeft2 cursorPointer">地图定位</span> -->
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>  
            </el-form>
    </EdDialog>
    <EdMap ref="edMap" @setAddress="setAddress" :edMapObj="data.edMapObj"></EdMap>
    <el-dialog custom-class="success_info" width="160px" :visible.sync="data.dialogVisible" :close-on-click-modal="false" :show-close="false">
        <el-result icon="success" title="设备同步成功">
        </el-result>
    </el-dialog>
    
    <el-dialog custom-class="error_info"  width="160px" :visible.sync="data.errorDdialogVisible" :close-on-click-modal="false" :show-close="false">
        <el-result icon="error" title="设备同步失败">
        </el-result>
    </el-dialog>
</div>
</template>

<script setup lang="ts">
import EdMap from "src/components/EdMap.vue";
import EdDialog from 'src/components/EdDialog.vue'
import ApiTable from 'src/components/ApiTable.vue'
import * as api from './api'
import message from 'src/utils/once-message'
import EdSelect from 'src/components/EdSelect.vue'
import router from 'src/router'
import store from 'src/store'
import {getDictByCode} from "src/api/dictionaries";
import * as validate from 'src/utils/validate'
import { onActivated, nextTick, ref, reactive, onMounted } from 'vue'
import { Village } from "../../../types";
import { Interface } from "../api";

const props = defineProps<{
    village:Village,
    interface:Interface
}>()
const videoParams = reactive({
    villageId:props.village.id,
    villageName:props.village.name,
    typeCode:props.interface.code,
    orgId:store.getters.vid,
    page:1
})
const videoDeviceForm = reactive({
    name:'',
    devicePlace:'',
    deviceId:'',
    longitude:'',
    latitude:'',
    deviceType:'',
    typeCode:props.interface.code,
    orgId:store.getters.vid,
    villageId:props.village.id,
    villageName:props.village.name,
})
const table = ref()
const videDdialogRef = ref()
const edMap = ref()
const videoDeviceFormRef = ref()

const data = reactive({
    dialogVisible:false,
    errorDdialogVisible:false,
    showVideoConfigure:false,
    deviceTypeParams:{
        placeholder:"请选择",
        options: [],
        props: {label:"label", value:"value"}
    },
    edMapObj:{},
    configId:''
})

onActivated(()=>{
    if(props.village.id){
        videoParams.villageId = props.village.id
        videoParams.villageName = props.village.name
    }
    nextTick(() => {
        table.value.load()
    })
})
onMounted(()=>{
    nextTick(() => {
        table.value.load()
    })
    getDictByCode("device_type").then(response => {
        if(response.success) {
            data.deviceTypeParams.options=response.data.items
        }
    })
})
function synchronizate() {
    // 调设备同步的接口
    api.synchronizate({villageId: props.village.id,deviceDevType:1}).then(response => {
        if (response.success) {
            data.dialogVisible = true,
            table.value.load()
            setTimeout(()=>{
                data.dialogVisible = false
            }, 2000)
        } else {
            data.errorDdialogVisible = true
            table.value.load()
            setTimeout(()=>{
                data.errorDdialogVisible = false
            }, 2000)
        }
    })
}
// 点击配置弹框
function editConfig(row){
    data.showVideoConfigure = true
    videoDeviceForm.name = row.name
    data.configId= row.id
    // 点配置回显的接口
    api.getConfigDetail(data.configId).then (res=>{
        if(res.success){
            Object.assign(videoDeviceForm,res.data)
        }
    })
}
// 配置保存，既能新增又能回显，还能编辑
function saveDialog(){
    videoDeviceFormRef.value.validate((valid)=>{
        if(!valid){
            videDdialogRef.value.loading = false
            return
        }
       api.editConfig(videoDeviceForm).then(res=>{
            if(res.success){
                message.success({
                    message: '云对接配置成功！',
                    duration: 2000,
                    center:true
                })
                table.value.load()
                data.showVideoConfigure = false
            } else {
                message.error({
                    message: '云对接配置失败！',
                    duration: 2000,
                    center:true
                })
                videDdialogRef.value.loading = false
            }
        }).catch(res=>{
            videDdialogRef.value.loading = false
        })
    })
}
function closeDialog(){
    data.showVideoConfigure = false
    videoDeviceFormRef.value.resetFields()
}
function setDeviceType(row){
    let options = data.deviceTypeParams.options.find(x => x.value == row.deviceType)
    return options ? options.label : ''
}
function showMap(){
    console.log('showMap',edMap);
    
    edMap.value.showMap()
}
function setAddress(data){
    videoDeviceForm.longitude = data.lnglat.lng
    videoDeviceForm.latitude = data.lnglat.lat
}
</script>

<style scoped lang="scss">
.enterList{
    text-align: right;
    padding: 10px;
    height: 56px;
}
:deep(.api-table){
    height: calc(100% - 56px);
    display: flex;
    flex-direction: column;
}
:deep(.el-dialog){
    margin-top: 0 !important;
    top: 50%;
    transform: translateY(-50%);
}
:deep(.success_info.el-dialog){
    height: 160px;
    .el-dialog__header{
        padding: 0;
    }
    .el-dialog__body{
        width: 100%;
        height: 100%;
        padding: 0;
        background: #EBF9F5;
        border: 1px solid #D8F3E8;
        border-radius: 8px;
        .el-result{
            height: 100%;
            .el-result__icon svg{
                fill: #65A9A5;
            }
            .el-result__title p{
                color: #65A9A5;
                font-size: 16px;
            }
        }
       
    }
} 
:deep(.error_info.el-dialog){
    height: 160px;
    .el-dialog__header{
        padding: 0;
    }
    .el-dialog__body{
        width: 100%;
        height: 100%;
        padding: 0;
        background: #FEF0F0;
        border: 1px solid #FFD7D7;
        border-radius: 8px;
        .el-result{
            height: 100%;
            .el-result__icon svg{
                fill: #EE7171;
            }
            .el-result__title p{
                color: #EE7171;
                font-size: 16px;
            }
        }
       
    }
} 
</style>